<!--
* @author wn
* @date 2022/07/07 14:43:48
* @description: 登录的头部组件
!-->
<template>
	<header class="login-header">
		<div class="container">
			<h1 class="logo"><router-link to="/">小兔鲜</router-link></h1>
			<h3 class="sub"><slot /></h3>
			<router-link class="entry" to="/">
				进入网站首页
				<i class="iconfont icon-angle-right"></i>
				<i class="iconfont icon-angle-right"></i>
			</router-link>
		</div>
	</header>
</template>
<script>
export default {
	name: 'LoginHeader',
}
</script>
<style scoped lang="less">
.login-header {
	background-color: #fff;
	border-bottom: 1px solid #e4e4e4;
	.container {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		.logo {
			width: 200px;
			a {
				display: inline-block;
				height: 132px;
				width: 100%;
				text-indent: -9999px;
				background: url(~@/assets/images/logo.png) no-repeat center 18px /
					contain;
			}
		}
		.sub {
			flex: 1;
			font-size: 24px;
			font-weight: normal;
			margin-bottom: 38px;
			margin-left: 20px;
			color: #666;
		}
		.entry {
			width: 160px;
			margin-bottom: 38px;
			font-size: 18px;
			i {
				font-size: 14px;
				color: @xtxColor;
				// 字间距  abc    a   b  c
				letter-spacing: -5px;
			}
		}
	}
}
</style>
